<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
           <meta name="author" content="Zhang Cheng">
		<title></title>
		<style>
			.inner{
				background-color: pink;
				height: 150px;
			}
		</style>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			
			
		<!--.stop 事件阻止冒泡-->
			<div class="inner" @click="divHandler">
				<input type="button" id="" value="按钮" @click.stop="btnHandler" />
			</div>
			
		<!--.prevent 阻止元素的默认事件 .once 事件函数只触发一次-->
		<a href="http://www.baidu.com" @click.prevent.once="linkHandler">百度一下你就知道</a>
		<!--.capture 使用捕获机制触发事件 从外到里-->
			<div class="inner" @click.capture="divHandler">
				<input type="button" id="" value="按钮" @click="btnHandler" />
			</div>
			<br />
		<!--.self 只触发自己的事件 当发生冒泡时只会阻止自己身上的冒泡，而不会阻止整个冒泡事件本身-->
			<div class="inner" @click.self="divHandler">
				<input type="button" id="" value="按钮" @click="btnHandler" />
			</div>
		</div>
		<script>
			
			var app = new Vue({
				el:'#app',
				data:{

				},
				methods:{
					divHandler(){
						console.log('divclick 大盒子');
					},
					btnHandler(){
						console.log('btnclick 小按钮');
					},
					linkHandler(){
						console.log('linkHander');
					}
				}
			});
		</script>
	</body>
</html>